<template>
  <ul class="t-menu">
    <template v-for="item in menuList" :key="item.url">
      <li class="t-menu-group">{{ item.title }}</li>
      <ul>
        <li
          @click="menuTagger(child)"
          v-for="child in item.children"
          :key="child.url"
          class="t-menu-item"
          :class="{
            't-menu-item-active': currentName === child.url,
          }"
        >
          {{ child.title }}
        </li>
      </ul>
    </template>
  </ul>
</template>

<script setup lang="ts">
import { ComputedRef, computed } from "vue";
import { useRoute } from "vue-router";
import router from "@/router";

const menuList = [
  {
    title: "文档",
    url: "md",
    children: [
      {
        title: "介绍",
        url: "/md/introduce",
      },
      {
        title: "安装",
        url: "/md/install",
      },
      {
        title: "开始使用",
        url: "/md/start",
      },
    ],
  },
  {
    title: "组件",
    url: "components",
    children: [
      {
        title: "Switch",
        url: "/components/switch",
      },
      {
        title: "Button",
        url: "/components/button",
      },
      {
        title: "Checkbox",
        url: "/components/checkbox",
      },
      {
        title: "Modal",
        url: "/components/modal",
      },
      {
        title: "Tab",
        url: "/components/tab",
      },
    ],
  },
];
const route = useRoute();
const currentName: ComputedRef = computed(() => {
  return route.path;
});
console.log(currentName.value);
const menuTagger = (item: any) => {
  router.push(item.url);
};
</script>
<style lang="scss" scoped>
.t-menu {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  &-group {
    font-size: 24px;
    line-height: 2;
    padding: 0 16px;
    font-weight: bold;
    color: #404244;
    margin-top: 36px;
  }
  &-item {
    padding: 16px 24px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-right: 5px solid transparent;
  }
  &-item:hover {
    color: $theme-default-color;
  }
  &-item-active {
    color: white;
    border-right: 5px solid $theme-default-color;
    background-color: $theme-default-active-color;
    font-weight: bold;
  }
  &-item-active:hover {
    color: white;
  }
}
</style>
